/**
 *     flex 弹性布局
 */

.flex {
  display: flex;
}

// 元素两倍关系
.row-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

// 元素缝隙均等
.row-evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

// 元素左右两侧无缝隙
.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 元素上下元素两倍关系
.column-around {
  display: flex;
  flex-direction: column;
  align-content: space-around;
}
// 元素上下缝隙均等
.column-evenly {
  display: flex;
  flex-direction: column;
  align-content: space-evenly;
}
// 元素上下两侧无缝隙
.column-between {
  display: flex;
  flex-direction: column;
  align-content: space-between;
}

// flex 块元素
.row-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

// 元素自动换行
.flex-row {
  display: felx;
  flex-wrap: wrap;
}

// 元素垂直对齐
.items {
  display: flex;
  align-items: center;
}

// 元素 横向 垂直对齐对齐
.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

/**
    常用css定义 
  p-10 == padding:10rpx;
  m-10 == margin:10rpx;
  w-10 == width:10rpx;  
  w10  == width:10%;

  font-10 == font-size:10rpx;
 */

@mixin loop($counter) {
  @if $counter > 0 {
    .p-#{$counter} {
      padding: (1rpx * $counter);
    }
    .w-#{$counter} {
      width: (1rpx * $counter);
    }
    .p-t-#{$counter} {
      padding-top: (1rpx * $counter);
    }
    .p-lr-#{$counter} {
      padding-left: (1rpx * $counter);
      padding-right: (1rpx * $counter);
    }
    .p-tb-#{$counter} {
      padding-top: (1rpx * $counter);
      padding-bottom: (1rpx * $counter);
    }
    .p-r-#{$counter} {
      padding-right: (1rpx * $counter);
    }
    .p-b-#{$counter} {
      padding-bottom: (1rpx * $counter);
    }
    .p-l-#{$counter} {
      padding-left: (1rpx * $counter);
    }
    .m-#{$counter} {
      margin: (1rpx * $counter);
    }
    .m-t-#{$counter} {
      margin-top: (1rpx * $counter);
    }
    .m-r-#{$counter} {
      margin-right: (1rpx * $counter);
    }
    .m-b-#{$counter} {
      margin-bottom: (1rpx * $counter);
    }
    .m-l-#{$counter} {
      margin-left: (1rpx * $counter);
    }
    .l-h-#{$counter} {
      line-height: (1rpx * $counter);
    }
    .w-#{$counter} {
      width: (1rpx * $counter);
    }
    .w#{$counter} {
      width: (1% * $counter);
    }
    .h-#{$counter} {
      height: (1rpx * $counter);
    }
    .font-#{$counter} {
      /* #ifndef MP-WEIXIN*/
      font-size: (1rpx * $counter);
      /* #endif */
      /* #ifndef H5*/
      font-size: (1rpx * ($counter + 2));
      /* #endif */
    }
    .img-size-#{$counter} {
      width: (1rpx * $counter);
      height: (1rpx * $counter);
    }
    @include loop($counter - 1); // 递归调用自身
  }
}
@include loop(200);

/**
            主题边框颜色  ----------------------------
**/

// 边框
.bd {
  border: 1px solid $uni-border-color;
}

// 上下边框
.bd-tb {
  border-left: 1px solid $uni-border-color;
  border-right: 1px solid $uni-border-color;
}

// 上边框
.bd-t {
  border-top: 1px solid $uni-border-color;
}

// 下边框
.bd-b {
  border-bottom: 1px solid $uni-border-color;
}

// 左边框
.bd-l {
  border-left: 1px solid $uni-border-color;
}

// 右边框
.bd-r {
  border-right: 1px solid $uni-border-color;
}

// 左右边框
.bd-lr {
  border-left: 1px solid $uni-border-color;
  border-right: 1px solid $uni-border-color;
}

.font-coloe-ff {
  color: #fff;
}

/**
            文字主题色  ----------------------------
**/

//基本色
.font-color {
  color: $uni-text-color;
}

//辅助灰色，如加载更多的提示信息
.font-color-2 {
  color: $uni-text-color-grey;
}
//辅助灰色，如加载更多的提示信息
.font-color-3 {
  color: $uni-text-color-placeholder;
}
//辅助灰色，如加载更多的提示信息
.font-color-4 {
  color: $uni-text-color-disable;
}

/**
            背景主题色  ----------------------------
**/

// 基本色
.bgc {
  background-color: $uni-bg-color;
}

//点击状态颜色
.bgc-hover {
  background-color: $uni-bg-color-hover;
}

//遮罩颜色
.bgc-mask {
  background-color: $uni-bg-color-mask;
}

/**
      文字字体
**/
.font-size-18 {
  font-size: 20rpx;
}
// 金额
.font-amount {
  font-size: 40rpx;
  color: red;
}

/**
            竖直  ----------------------------
**/
// 黄色
.ver-yellow {
  width: 0rpx;
  border: 2px solid yellow;
  display: inline-block;
  margin: 0 25rpx;
  height: 20rpx;
  border-radius: 10rpx;
}

// 蓝色
.ver-blue {
  width: 0rpx;
  border: 2px solid blue;
  display: inline-block;
  margin: 0 25rpx;
  height: 20rpx;
  border-radius: 10rpx;
}
// 红色
.ver-red {
  width: 0rpx;
  border: 2px solid red;
  display: inline-block;
  margin: 0 25rpx;
  height: 20rpx;
  border-radius: 10rpx;
}

// 阴影
.boxShow {
  box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.1), 0 0 4px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.1),
    0 0 4px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
